<template>
    <div class="container">
        <header class="noPrint">
            <div v-show="!isCollapse" class="logo logo-width">
                风险控制平台
            </div>
            <div v-on:click="isCollapse = !isCollapse" class="tools noPrint">
                <i class="fa fa-align-justify"></i>
            </div>
            <ul class="header-navigation noPrint">
                <li v-on:click="topClick(1)" class="noPrint">
                    <a>特色类</a>
                </li>
                <li v-on:click="topClick(2)" class="noPrint">
                    <a>房产类</a>
                </li>
                <li v-on:click="topClick(3)" class="noPrint">
                    <a>企业类</a>
                </li>
                <li v-on:click="topClick(4)" class="noPrint">
                    <a>综合报告</a>
                </li>
                <li class="last noPrint">
                    <a href="javascript:void (0);">
                        <i class="fa fa-cogs"></i> 设置
                    </a> 
                    <ul class="hd-menu-right setting clearfix">
                        <li>
                            <a href="javascript:void(0);">
                                <i aria-hidden="true" class="fa fa-key"></i>&nbsp;&nbsp;修改密码
                            </a>
                        </li> 
                        <li>
                            <a href="javascript:void(0);">
                                <i aria-hidden="true" class="fa fa-sign-out"></i>&nbsp;&nbsp;退 出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </header>

        <div class="main">
            <aside :class="{ 'noPrint menu-expanded': !isCollapse, 'noPrint menu-collapsed': isCollapse }" style="min-height: 386px;">
                <component :is="menuComponent" :collapse="isCollapse" unique-opened="true"></component>
                <!-- <Tese class="noPrint aside-style el-menu" :Collapse="isCollapse" /> -->
            </aside>
            <section id="section">
                <!-- <component :is="currentComponent"></component> -->
                <router-view/>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import '../assets/home.css'
import Tese from './aside/Tese.vue'
// const Tese = () => import('@/components/aside/Tese.vue')
import Geren from './aside/Geren.vue'
import Realestate from './aside/Realestate.vue'

import { ref,shallowRef } from "vue";
import $ from 'jquery'
let isCollapse = ref(false);
let menuComponent = shallowRef(Tese);
$(function(){
    // 点击事件
    $('body').on('click','.last',function(){
        if($(this).children().eq(1).hasClass('setting-right')){
            $(this).children().eq(1).removeClass('setting-right');
        }else{
            $(this).children().eq(1).addClass('setting-right');
        }
    })
})
function topClick(index) {
    // console.log(index);
    if (index == 1) {
        this.menuComponent = Tese
    }
    else if (index == 2) {
        this.menuComponent = Realestate
    }
};

</script>./aside/Tese1-1.vue